<template>
  <div class="playvideo" v-if="item && resemblance" ref="playvideo">
    <div class="mask" ref="video">
      <video
        class="video"
        @timeupdate="getCurrentTime"
        :src="canurl"
        width="100%"
        height="auto"
        autoplay
      ></video>
      <div class="control" @click="controlShow">
        <div class="controlitem" v-show="showcontrol">
          <div class="head">
            <i class="iconfont icon-fanhui" @click="$router.back()"></i>
            <i class="iconfont icon-gengduo"></i>
          </div>
          <div class="play">
            <i
              class="iconfont icon-bofangzanting"
              v-if="playvideo"
              @click.stop="playpause"
            ></i>
            <i class="iconfont icon-24gf-play" v-else @click="playpause"></i>
          </div>
          <div class="foot">
            <ProgressBar class="bar"></ProgressBar>
            <span ref="speed" @click.stop="show = !show">倍速</span>
            <i class="iconfont icon-fangda"></i>
          </div>
        </div>
      </div>
    </div>

    <div class="main">
      <van-tabs swipeable>
        <van-tab title="简介" class="jianjie">
          <div v-if="!showload">
            <div class="msg">
              <div class="top">
                <img :src="item.cover" alt="" />
                <span>{{ item.title }}</span>
              </div>
              <div class="midbox" v-if="item.count">
                <div
                  class="mid"
                  v-for="(i, index) in item.categories"
                  :key="index"
                >
                  <span>{{ i.category_name }}-{{ i.sub.category_name }}</span>
                </div>
                <span>{{ item.publish_time | publishtime }}</span>
                <span>{{ item.count.count_view | count }}次播放</span>
              </div>
              <div class="content">
                <p>{{ item.content }}</p>
              </div>
              <div class="foot" v-if="item.count">
                <span
                  ><i class="iconfont icon-31dianzan"></i
                  >{{ item.count.count_like | count }}</span
                >
                <span
                  ><i class="iconfont icon-shoucang"></i
                  >{{ item.count.count_collect | count }}</span
                >
                <span
                  ><i class="iconfont icon-fenxiang"></i
                  >{{ item.count.count_share | count }}</span
                >
              </div>
            </div>
            <hr />
            <div class="tag">
              <div class="tagitem" v-for="(i, index) in item.tags" :key="index">
                <span>{{ i.name }}</span>
              </div>
            </div>
            <hr />
            <div class="people" v-if="item.author&&item.team.length">
              <p>创作人</p>
              <div class="peop" @touchmove.stop="stopKove">
                <div class="peoples">
                  <img :src="item.author.userinfo.avatar | picUrl" alt="" />
                  <div class="user">
                    <span class="username">{{
                      item.author.userinfo.username
                    }}</span>
                    <span class="occu">{{ item.author.role }}</span>
                  </div>
                  <div
                    @click.stop="attention(item.author.userinfo.id)"
                    class="guanzhu"
                    v-if="attentionList.indexOf(item.author.userinfo.id) == -1"
                  >
                    关注
                  </div>
                  <div
                    @click.stop="attention(item.author.userinfo.id)"
                    class="guanzhu guanzhued"
                    v-else
                  >
                    已关注
                  </div>
                </div>
                <div class="bbox" v-if="item.team">
                  <div
                    class="peoples"
                    v-for="(i, index) in item.team"
                    :key="index"
                  >
                    <img :src="i.userinfo.avatar | picUrl" alt="" />
                    <div class="user">
                      <span class="username">{{ i.userinfo.username }}</span>
                      <span class="occu">{{ i.role }}</span>
                    </div>
                    <div
                      @click.stop="attention(i.userinfo.id)"
                      class="guanzhu"
                      v-if="attentionList.indexOf(i.userinfo.id) == -1"
                    >
                      关注
                    </div>
                    <div
                      @click.stop="attention(i.userinfo.id)"
                      class="guanzhu guanzhued"
                      v-else
                    >
                      已关注
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="revideo">
              <p>相似视频</p>
              <FinddeItem :list="resemblance"></FinddeItem>
            </div>
          </div>
          <MyLoading v-if="showload"></MyLoading>
        </van-tab>
        <van-tab title="评论" class="pinglun">
          <div class="item" v-for="(i, index) in comment" :key="index">
            <img :src="i.userInfo.avatar | picUrl" alt="" />
            <div class="cont">
              <div class="top">
                <span>{{ i.userInfo.username }}</span>
                <i class="iconfont icon-androidgengduo"></i>
              </div>
              <div class="mid">
                <span v-if="i.referer" class="refer"
                  >回复{{ i.referer.userInfo.username }}<b>:</b></span
                >
                <div v-html="i.content"></div>
              </div>
              <div class="bot">
                <span>{{ i.addtime | publishtime }}</span>
                <div class="right">
                  <span><i class="iconfont icon-pinglun1"></i></span>
                  <span
                    ><i class="iconfont icon-31dianzan"></i
                    >{{ i.userInfo.count.count_liked }}</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div v-show="comment.length == 0">该视频没有评论</div>
        </van-tab>
      </van-tabs>
    </div>
    <van-popup
      class="mypopup"
      v-model="show"
      round
      position="bottom"
      :style="{ background: '#f7f7f7' }"
    >
      <div>请选择</div>
      <div class="speed" @click="playrate" value="0.5">0.5X</div>
      <div class="speed active" @click="playrate" value="1.0">1.0X</div>
      <div class="speed" @click="playrate" value="1.25">1.25X</div>
      <div class="speed" @click="playrate" value="1.5">1.5X</div>
      <div class="speed" @click="playrate" value="2.0">2.0X</div>
      <div class="speed" @click="show = false">取消</div>
    </van-popup>
  </div>
  <MyLoading v-else></MyLoading>
</template>

<script>
import Vue from "vue";
import { mapState } from "vuex";
import { Tab, Tabs } from "vant";
import ProgressBar from "@/components/ProgressBar.vue";
import FinddeItem from "@/components/FinddeItem.vue";
import MyLoading from "@/components/MyLoading.vue";
import { Popup } from "vant";

Vue.use(Popup);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  components: {
    ProgressBar,
    FinddeItem,
    MyLoading,
  },
  data() {
    return {
      item: {},
      comment: [],
      showcontrol: false,
      playvideo: true,
      show: false,
      resemblance: null,
      ids: null,
      showload: false,
      canurl: null,
      logined:0
    };
  },
  watch: {
    newcurrentTime: function (n) {
      this.$refs.video.querySelector(".video").currentTime = n;
    },
    $route: function (n) {
      this.canurl = "";
      this.axios
        .get("https://apis.netstart.cn/xpc/article/" + n.query.id)
        .then((res) => {
          var k = res.data.data.video.content.progressive;
          if (k) {
            this.canurl = k[k.length - 1].url;
          }
        });

      this.showload = true;
      this.axios
        .get("https://apis.netstart.cn/xpc/article/" + n.query.id)
        .then((res) => {
          this.item = res.data.data;
          this.$store.commit("upduration", { value: this.item.duration });
          if (
            this.bigCurrentTime < this.item.duration &&
            this.bigCurrentId == this.$route.query.id
          ) {
            this.$refs.video.querySelector(".video").currentTime =
              this.bigCurrentTime;
          }
        });
      this.axios
        .get("https://apis.netstart.cn/xpc/comments?resource_id=" + n.query.id)
        .then((res) => {
          this.comment = res.data.data.list;
        });
      this.axios
        .get("https://apis.netstart.cn/xpc/article/" + n.query.id + "/next")
        .then((res) => {
          this.resemblance = res.data.data.list;
          this.showload = false;
        });
    },
  },
  computed: mapState([
    "newcurrentTime",
    "bigCurrentTime",
    "bigCurrentId",
    "attentionList",
  ]),
  created() {
    this.ids = this.$route.query.id;
    this.logined = JSON.parse(window.localStorage.getItem('logined'))||0
    this.axios
      .get("https://apis.netstart.cn/xpc/article/" + this.$route.query.id)
      .then((res) => {
        var k = res.data.data.video.content.progressive;
        if (k) {
          this.canurl = k[k.length - 1].url;
        }
      });
    this.axios
      .get(
        "https://apis.netstart.cn/xpc/article/" + this.$route.query.id + "/next"
      )
      .then((res) => {
        this.resemblance = res.data.data.list;
      });
  },
  updated() {
    this.ids = this.$route.query.id;
  },
  mounted() {
    this.axios
      .get("https://apis.netstart.cn/xpc/article/" + this.$route.query.id)
      .then((res) => {
        this.item = res.data.data;
        this.$store.commit("upduration", { value: this.item.duration });
        if (
          this.bigCurrentTime < this.item.duration &&
          this.bigCurrentId == this.$route.query.id
        ) {
          this.$refs.video.querySelector(".video").currentTime =
            this.bigCurrentTime;
        }
      });
    this.axios
      .get(
        "https://apis.netstart.cn/xpc/comments?resource_id=" +
          this.$route.query.id
      )
      .then((res) => {
        this.comment = res.data.data.list;
      });
  },
  methods: {
    stopKove() {
      return false;
    },
    attention(id) {
      if(this.logined){
        this.$store.commit("addAttention", { id: id });
      }else{
        this.$router.push({path:'/loginreg'})
      }
    },
    playrate(eve) {
      this.$refs.video.querySelector(".video").playbackRate =
        eve.target.getAttribute("value");
      this.$refs.playvideo.querySelectorAll(".speed").forEach((e) => {
        if (e.classList.contains("active")) {
          e.classList.remove("active");
        }
      });
      eve.target.classList.add("active");
      if (eve.target.getAttribute("value") == "1.0") {
        this.$refs.speed.innerHTML = "倍速";
      } else {
        this.$refs.speed.innerHTML = eve.target.innerText;
      }
    },
    controlShow() {
      this.showcontrol = !this.showcontrol;
    },
    playpause() {
      this.playvideo = !this.playvideo;
      if (!this.playvideo) {
        this.$refs.video.querySelector(".video").pause();
      } else {
        this.$refs.video.querySelector(".video").play();
      }
    },
    getCurrentTime() {
      if (this.$refs.video) {
        this.$store.commit("upcurrentTime", {
          value: this.$refs.video.querySelector(".video").currentTime,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.playvideo {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .mypopup {
    div {
      background-color: #fff;
      width: 100%;
      margin-bottom: 1px;
      padding: 10px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      &:first-child {
        font-size: 12px;
        color: #aaa;
      }
      &:last-child {
        margin-top: 10px;
      }
      &.active {
        color: #e06756;
      }
    }
  }
  .mask {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #c4c4c4;
    .video {
      display: block;
    }
    .control {
      width: 100%;
      height: 99%;
      position: absolute;
      top: 0;
      left: 0;
      .controlitem {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        padding: 10px 18px;
        display: flex;
        align-content: space-between;
        flex-wrap: wrap;
        justify-content: center;
        .head {
          width: 100%;
          display: flex;
          justify-content: space-between;
          i {
            font-size: 20px;
            color: white;
          }
        }
        .play {
          width: 100%;
          display: flex;
          justify-content: center;
          i {
            font-size: 30px;
            color: white;
          }
        }
        .foot {
          width: 100%;
          display: flex;
          align-items: center;
          .bar {
            flex: 1;
          }
          span {
            color: white;
            font-size: 14px;
            margin: 0 10px;
          }
          i {
            color: white;
            font-size: 20px;
          }
        }
      }
    }
  }
  .main {
    .jianjie {
      .msg {
        .top {
          display: flex;
          align-items: center;
          margin: 25px 15px 15px 15px;
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
          }
          span {
            font-size: 18px;
            font-weight: 600;
          }
        }
        .midbox {
          display: flex;
          font-size: 13px;
          color: #c4c4c4;
          justify-content: space-between;
          align-items: center;
          margin: 0px 15px 10px 15px;
          .mid {
            display: inline-block;
          }
        }
        .content {
          width: 100%;
          p {
            font-size: 14px;
            margin: 0px 15px 10px 15px;
            color: #666;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
        .foot {
          display: flex;
          justify-content: space-around;
          margin: 0px 15px 20px 15px;
          span {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 13px;
            color: #000;
            font-weight: 500;
            justify-content: space-between;
            height: 46px;
            i {
              font-size: 26px;
              font-weight: 600;
              color: #000;
            }
          }
        }
      }
      hr {
        width: 100%;
        background-color: #f7f7f7;
        border: none;
        outline: none;
        height: 1px;
      }
      .tag {
        width: 100%;
        padding: 15px;
        display: flex;
        flex-wrap: wrap;
        .tagitem {
          padding: 5px 10px;
          border-radius: 5px;
          display: flex;
          font-size: 12px;
          justify-content: center;
          align-items: center;
          background-color: #f7f7f7;
          color: #9d9d9d;
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }
      .people {
        width: 100%;
        height: 150px;
        padding: 15px 0px;
        display: flex;
        align-content: space-around;
        flex-wrap: wrap;
        p {
          font-size: 18px;
          font-weight: 500px;
          margin-left: 15px;
          margin-bottom: 10px;
          display: flex;
          align-items: center;
        }
        .peop {
          height: 70px;
          display: flex;
          align-items: center;
          overflow-x: auto;
          &::-webkit-scrollbar {
            display: none;
          }
          .peoples {
            flex-shrink: 0;
            width: 310px;
            height: 60px;
            padding: 10px;
            box-shadow: 0px 0px 8px 0.2px #eee;
            display: flex;
            align-items: center;
            margin-left: 15px;
            border-radius: 10px;
            img {
              width: 45px;
              height: 45px;
              border-radius: 50%;
              margin-right: 10px;
            }
            .user {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              height: 44px;
              .username {
                font-weight: 600;
              }
              .occu {
                font-size: 12px;
                color: #999;
              }
            }
            .guanzhu {
              width: 80px;
              padding: 5px 15px;
              border-radius: 26px;
              font-weight: 500;
              text-align: center;
              color: #e76961;
              background-color: #fbeee8;
              &.guanzhued {
                  background-color: #ddd;
                  color: #888;
                }
            }
          }
          .bbox {
            display: flex;
            .peoples {
              flex-shrink: 0;
              width: 310px;
              height: 60px;
              padding: 10px;
              box-shadow: 0px 0px 8px 0.2px #eee;
              display: flex;
              align-items: center;
              margin-left: 15px;
              border-radius: 10px;
              img {
                width: 45px;
                height: 45px;
                border-radius: 50%;
                margin-right: 10px;
              }
              .user {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                height: 44px;
                .username {
                  font-weight: 600;
                }
                .occu {
                  font-size: 12px;
                  color: #999;
                }
              }
              .guanzhu {
                width: 80px;
                padding: 5px 15px;
                border-radius: 26px;
                font-weight: 500;
                text-align: center;
                color: #e76961;
                background-color: #fbeee8;
                &.guanzhued {
                  background-color: #ddd;
                  color: #888;
                }
              }
            }
          }
        }
      }
      .revideo {
        width: 100%;
        padding: 0 15px;
        p {
          font-size: 18px;
          font-weight: 500px;
          margin-bottom: 10px;
          display: flex;
          align-items: center;
        }
      }
    }
    .pinglun {
      width: 100vw;
      padding: 0px 15px;
      overflow: hidden;
      white-space: pre-wrap;
      .item {
        display: flex;
        min-height: 80px;
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-right: 10px;
          margin-top: 10px;
        }
        .cont {
          flex: 1;
          padding: 10px 0;
          border-bottom: 1px solid #f7f7f7;
          .top {
            font-size: 13px;
            color: #444;
            display: flex;
            justify-content: space-between;
            span {
              text-align: left;
            }
            i {
              color: #888;
            }
          }
          .mid {
            font-size: 14px;
            color: #000;
            margin-top: 5px;
            margin-bottom: 10px;
            display: flex;
            overflow: hidden;
            .refer {
              color: #aaa;
              white-space: nowrap;
              b {
                color: #000;
              }
            }
          }
          .bot {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #aaa;
            span {
              &:nth-of-type(2) {
                margin: 10px;
              }
            }
            i {
              font-size: 14px;
              color: #aaa;
            }
          }
        }
      }
    }
  }
}
</style>